import { defineComponent, watch, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
	cdata: {
		type: Object,
		require: true,
	},
} as const

// 定义主体
export default defineComponent({
	props: PropsType,
	setup(props) {
		// 定义 ref
		const chartRef = ref()
		// 配置项
		let options = {}

		// 监听
		watch(
			() => props.cdata,
			(val: any) => {
				options = {
					tooltip: {
						trigger: 'item',
						// axisPointer: {
						// 	type: 'cross',
						// },
						// trigger: 'item',
						show: true,
						axisPointer: {
							type: 'cross',
							label: {
								show: true,
								backgroundColor: '#7B7DDC',
							},
						},
					},
					legend: {
						show: true,
					},
					grid: {
						x: '2%',
						width: '96.5%',
						left: '2.2%',
						top: '5%',
						bottom: '3%',
					},
					xAxis: {
						data: val.dateData,
						axisLine: {
							lineStyle: {
								color: '#B4B4B4',
							},
						},
						axisTick: {
							alignWithLabel: true,
							show: false,
						},
						axisLabel: {
							rotate: 30,
							interval: 0,
						},
					},
					yAxis: [
						{
							type: 'value',
							name: '温度',
							position: 'left',
							// splitNumber: 5,
							// max: props.cdata.tmax + 5,
							alignTicks: false,
							splitLine: { show: false },
							// y轴名字样式
							nameTextStyle: {
								fontSize: 18,
								padding: [0, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
							},
							// y轴样式
							axisLine: {
								lineStyle: {
									color: 'white',
								},
							},
							// y轴刻度样式
							axisLabel: {
								formatter: '{value}℃',
								// 改变y轴字体大小
								// textStyle: {
								// 	color: '#62B4BB',
								// 	fontSize: '16',
								// },
							},
						},
						{
							name: '湿度/PH',
							// max: props.cdata.smax + 5,
							splitLine: { show: false },
							// y轴名字样式
							nameTextStyle: {
								fontSize: 18,
								padding: [0, 30, 0, 0],
							},
							axisLine: {
								lineStyle: {
									color: 'white',
								},
							},
							axisLabel: {
								formatter: '{value} ',
							},
						},
					],
					series: [
						{
							name: '堆肥温度',
							type: 'line',
							smooth: true,
							showAllSymbol: true,
							symbol: 'emptyCircle',
							symbolSize: 9,
							yAxisIndex: 0,
							itemStyle: {
								normal: {
									color: '#e44f26',
								},
							},
							data: val.temperature,
						},
						{
							name: '室内温度',
							type: 'line',
							smooth: true,
							showAllSymbol: true,
							symbol: 'emptyCircle',
							symbolSize: 8,
							yAxisIndex: 0,
							itemStyle: {
								normal: {
									color: '#F02FC2',
								},
							},
							data: val.indoorTemperature,
						},
						{
							name: '湿度',
							type: 'bar',
							barWidth: 10,
							yAxisIndex: 1,
							itemStyle: {
								normal: {
									barBorderRadius: 5,
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: '#956FD4' },
										{ offset: 1, color: '#3EACE5' },
									]),
								},
							},
							data: val.humidityData,
						},
						{
							name: 'PH',
							type: 'bar',
							yAxisIndex: 1,
							barWidth: 10,
							itemStyle: {
								normal: {
									barBorderRadius: 5,
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: 'rgba(156,107,211,0.8)' },
										{ offset: 0.2, color: 'rgba(156,107,211,0.5)' },
										{ offset: 1, color: 'rgba(156,107,211,0.2)' },
									]),
								},
							},
							z: -12,
							data: val.PHData,
						},
					],
				}
				// 手动触发更新
				if (chartRef.value) {
					// 通过初始化参数打入数据
					chartRef.value.initChart(options)
				}
			},
			{
				immediate: true,
				deep: true,
			}
		)

		return () => {
			const height = '750px'
			const width = '100%'

			return (
				<div>
					<echart ref={chartRef} height={height} width={width} />
				</div>
			)
		}
	},
})
